<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝选择器</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        #app>div>span:first-of-type{
            color: #ff5000;
            display: inline-block;
            width: 280px;
        }
        p>span{
            display: inline-block;
            width: 120px;
            height: 28px;
            line-height: 28px;
            background-color: #f2f2f2;
            text-align: center;
            border-radius: 10px;
        }
        .select{
            background-color: #ff5000;
            color:white;
        }
        .noselect{
            background-color: #f2f2f2;
            color: black;
        }
        .hideContent{
            display: none;
        }
        .showContent{
            display:flow-root;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>区域：
            <span>{{msg}}</span> 
            <span class="iconfont" @click="show()" :class="classFont"></span>
        </div>
        <p :class="classDisplay">
            <span @click="changeMsg($event,1)" :class="classStr1" >江浙沪</span>
            <span @click="changeMsg($event,2)" :class="classStr2"  >珠三角</span>
            <span @click="changeMsg($event,3)" :class="classStr3"  >北京</span>
        </p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"江浙沪",
                classStr1:"noselect",
                classStr2:"noselect",
                classStr3:"noselect",
                classFont:"icon-xiangshangjiantou",
                classDisplay:"hideContent"
            },
            methods:{
                changeMsg(e,num){
                    this.msg=e.target.innerText;
                    this.classStr1="noselect";
                    this.classStr2="noselect";
                    this.classStr3="noselect";
                    if(num==1){
                        this.classStr1="select";
                    }else if(num==2){
                        this.classStr2="select";
                    }else{
                        this.classStr3="select";
                    }

                },
                show(){
                   if(this.classFont=="icon-xiangxiajiantou"){
                       this.classFont="icon-xiangshangjiantou";
                       this.classDisplay="hideContent";
                   }else{
                       this.classFont="icon-xiangxiajiantou";
                       this.classDisplay="showContent";
                   }
                }
            }
        })
    </script>
</body>
</html>